<template>
  <div class="editor">

    <HeaderEdit v-show="showTools" :goback="dialogSave" @saveThemeSuccess="view"/>

    <section class="section">
      <!--  左边工具栏 -->
      <div :class="{'hide': leftHide}" v-show="showTools" style="height: 40%;position: fixed;left: 0px;z-index: 9999;top: 50%;transition: all 0.4s ease;">
        <Overview :canvas-width="editorTheme.canvasWidth" :canvas-height="editorTheme.canvasHeight" class="overview"/>
        <div
          :class="{'tip_close': leftHide}"
          class="tip_open"
          v-text="leftHide?'图层':'隐藏'"
          @click="leftHide = !leftHide"
        >
        </div>
      </div>

      <div style="position: fixed;left: 40px; bottom: 20px;width: 200px;height: 40px;z-index: 999">
        <!--<el-slider-->
        <!--:max="1.5"-->
        <!--:min="0.3"-->
        <!--:step="0.1"-->
        <!--v-model="pageScale"-->
        <!--show-input>-->
        <!--</el-slider>-->
        <el-input-number small style="width: 110px!important;height: 16px!important;transform:scale(0.8)"
                         v-model="pageScale" :step="0.1" :max="1" :min="0.1" label="缩放"></el-input-number>
        <div @click="showTools= !showTools" style="display: inline-block">
          <icon-svg v-if="showTools" style="margin-left: 10px;color: black" name="opens"></icon-svg>
          <icon-svg v-if="!showTools" style="margin-left: 10px;color: black" name="exits"></icon-svg>
        </div>

      </div>

      <!--编辑区-->
      <el-scrollbar ref="scr" @click="togglePanel(0)" style="width: 100%;height: 100%;position: absolute;top: 0px;">
        <div @click="togglePanel(0)" :style="{transform:'scale('+ pageScale + ')',width: editorTheme.canvasWidth + 60 + 'px', height: editorTheme.canvasHeight + 40 + 'px' }"
             style="margin-top: 1000px;margin-left: 1000px;background-color: white;margin-bottom: 1000px">
          <div style="height: 21px;">
          </div>
          <!--<vue-drag-resize :x="editorTheme.canvasWidth/2" :y="editorTheme.canvasHeight/2" :isDraggable="panelState==0"-->
                           <!--:w="editorTheme.canvasWidth" :h="editorTheme.canvasHeight" :isResizable="false">-->
            <Page @click="togglePanel(0)"
                  class="canvas" :elements="editorPage.elements"
                  :editorElement="element"
                  :selectedElement="selectedElement"
                  :style="{ width: editorTheme.canvasWidth + 'px',
                   height: editorTheme.canvasHeight + 'px',
                   backgroundImage:'url(' + assist + ')',
                   backgroundSize: '100% 100%'}"
                  style="border-bottom: 1px solid black; border-right: 1px solid black;"/>
          <!--</vue-drag-resize>-->
          <div class="ruler left">
            <ul>
              <li class="p"><a href="#">0</a></li>
              <li v-for="i in editorTheme.canvasHeight" v-if="i % 20 === 0 || i === editorTheme.canvasHeight" :class="[i % 100 === 0 ?'p':'']">
                <a href="#" v-text="i % 100===0?i:''"></a>
              </li>
            </ul>
          </div>
        </div>
        <div @click="togglePanel(0)" class="ruler top">
          <ul>
            <li class="p"><a href="#">0</a></li>
            <li v-for="i in editorTheme.canvasWidth" v-if="i % 20 === 0 || i === editorTheme.canvasWidth" :class="[i % 100 === 0 ?'p':'']">
              <a href="#" v-text="i % 100===0?i:''"></a>
            </li>
            <div style="clear: left;"></div>
          </ul>
          <div style="clear: both;"></div>
        </div>
        <div style="clear: both;"></div>
      </el-scrollbar>
      <div style="clear: left;"></div>

      <!--右边工具栏-->
      <div v-show="showTools" :class="{'right-hide': rightHide}" class="control-panel"  style="transition: all 0.4s ease;">
        <div @click="rightHide = true" style="color:#575e5b;position: absolute;bottom: 1%;
        z-index: 9;right: 20%;line-height: 20px;font-size: 20px;">
          <icon-svg name="hide"></icon-svg>
        </div>
        <div class="funcs">
          <el-tooltip effect="dark" content="新建文本" placement="left">
            <button class="func el-icon-edit" @click="togglePanel(1)" :class="{ active: panelState === 1 }"></button>
          </el-tooltip>
          <el-tooltip effect="dark" content="图片素材" placement="left">
            <button class="func el-icon-picture" @click="togglePanel(2)" :class="{ active: panelState === 2 }"></button>
          </el-tooltip>
          <!-- 视频资源 -->
          <el-tooltip effect="dark" content="视频素材" placement="left">
            <button class="func" @click="togglePanel(3)" :class="{ active: panelState === 3 }">
              <icon-svg class="panel-button" name="vedio"></icon-svg>
            </button>
          </el-tooltip>
          <el-tooltip effect="dark" content="文档素材" placement="left">
            <button class="func el-icon-document" @click="togglePanel(5)"
                    :class="{ active: panelState === 5 }"></button>
          </el-tooltip>
          <el-tooltip effect="dark" content="动画素材" placement="left">
            <button class="func" @click="togglePanel(6)" :class="{ active: panelState === 6 }">
              <icon-svg class="panel-button" name="flash"></icon-svg>
            </button>
          </el-tooltip>
          <el-tooltip effect="dark" content="添加直播" placement="left">
            <button class="func" @click="addLive">
              <icon-svg  class="panel-button" name="live"></icon-svg>
            </button>
          </el-tooltip>
          <el-tooltip effect="dark" content="添加天气" placement="left">
            <button class="func" @click="addWearher">
              <icon-svg class="panel-button" name="weather"></icon-svg>
            </button>
          </el-tooltip>
          <el-tooltip effect="dark"  content="其他" placement="left" >
            <button class="func" @click="togglePanel(7)" :class="{ active: panelState === 7}">
              <icon-svg class="panel-button" name="other"></icon-svg>
            </button>
          </el-tooltip>
          <el-tooltip effect="dark" content="页面设置" placement="left">
            <button class="func" @click="togglePanel(0)" :class="{ active: panelState === 0 }">
              <icon-svg class="panel-button" name="zhedie"></icon-svg>
            </button>
          </el-tooltip>
        </div>
        <div class="wrapper custom-scrollbar">
          <!-- 设置背景 0 -->
          <div class="panel panel-bg">
            <div class="clearfix"
                 v-if="panelTabState == 0">
              <div>
                <el-button class="btn"
                           type="success"
                           @click="panelTabState = 1">更换背景
                </el-button>
                <el-button class="btn"
                           type="danger"
                           @click="cleanBG">移除背景
                </el-button>
              </div>
              <div style="margin-top: 10px">
                背景音:
                <audio style="margin-top: 20px;background-color: #ececec!important;" v-if="editorPage.music"
                       :src="http + editorPage.music" controls>
                  您的浏览器不支持 audio 标签。
                </audio>
              </div>
              <div>
                <el-button class="btn" type="success" @click="panelTabState = 4">
                  插入音乐
                </el-button>
                <el-button class="btn"
                           type="danger"
                           @click="cleanMusic">移除音乐
                </el-button>
              </div>
              <div>
                场景时长:
                <el-input style="margin-top: 20px" type="number" :min="0" v-model="editorPage.duration">
                  <template slot="append">秒</template>
                </el-input>
              </div>
              <div style="line-height: 40px;">
                辅助布局:（<span style="color: green">选择样式快速布局</span>）
              </div>
              <div>
                <div class="ele"
                     style="background-color: #dcdddd"
                     @click="updateAssist(0)">
                </div>
                <div class="ele"
                     :style="{ backgroundImage: 'url(' + assist1 + ')' }"
                     @click="updateAssist(1)">
                </div>
                <div class="ele"
                     :style="{ backgroundImage: 'url(' + assist2 + ')' }"
                     @click="updateAssist(2)">
                </div>
                <div class="ele"
                     :style="{ backgroundImage: 'url(' + assist3 + ')' }"
                     @click="updateAssist(3)">
                </div>
                <div class="ele"
                     :style="{ backgroundImage: 'url(' + assist4 + ')' }"
                     @click="updateAssist(4)">
                </div>
                <div class="ele"
                     :style="{ backgroundImage: 'url(' + assist5 + ')' }"
                     @click="updateAssist(5)">
                </div>
                <div class="ele1"
                     style="background-color: #dcdddd"
                     @click="updateAssist(0)">
                </div>
                <div class="ele1"
                     :style="{ backgroundImage: 'url(' + assist6 + ')' }"
                     @click="updateAssist(2)">
                </div>
                <div class="ele1"
                     :style="{ backgroundImage: 'url(' + assist7 + ')' }"
                     @click="updateAssist(6)">
                </div>
              </div>
            </div>
            <div class="clearfix"
                 v-if="panelTabState === 1">
              <ImgPanel :selectedImg="addBG"/>
            </div>
            <div class="clearfix"
                 v-if="panelTabState === 4">
              <MusicPanel :selectedImg="addMusic"/>
            </div>
          </div>
          <!-- 添加文字 1 -->
          <div class="panel panel-text" v-show="panelState === 1">
            <div class="btn" @click="addTextElement('title')" style="font-size: 32px; font-weight: bold;">插入标题</div>
            <div class="btn" @click="addTextElement('plain')">插入文本</div>
          </div>
          <!-- 添加元素 2 -->
          <div class="panel panel-element clearfix" v-show="panelState === 2">
            <ImgPanel :selectedImg="addPicElement" :themeId="itemId"/>
          </div>
          <!-- 视频资源panel -->
          <div class="panel panel-element clearfix" v-show="panelState === 3">
            <VideoPanel :selectedVideo="addVideoElement" :themeId="itemId"/>
          </div>
          <!-- 文本资源panel -->
          <div class="panel panel-element clearfix" v-show="panelState === 5">
            <TextPanel :selectedDoc="addDocElement" :themeId="itemId"/>
          </div>
          <!-- 动画资源panel -->
          <div class="panel panel-element clearfix" v-show="panelState === 6">
            <AnimPanel :selectedDoc="addAnimElement" :themeId="itemId"/>
          </div>
          <!-- 其他panel -->
          <div class="panel panel-element clearfix" v-show="panelState === 7">
            <OtherPanel :selectOther="addOtherElement" :themeId="itemId"/>
          </div>
          <!-- 图层编辑面板 -->
          <EditPanel :element="element" :panelState="panelState" v-show="panelState > 10"/>
        </div>
      </div>
    </section>
    <PreView :itemId="itemId" @hideView="showPreView=false" v-if="showPreView"/>
  </div>
</template>

<script>
  import tools from '../../util/tools'
  import Overview from './overview'
  import Page from '../../components/Page'
  import PicPicker from '../../components/PicturePicker'
  import PreView from '../../components/PreView'
  import HeaderEdit from '../../components/HeaderEdit'
  import EditPanel from '../../components/EditPanel'
  import SvgPanel from '../../components/SvgPanel'
  import ImgPanel from '../../components/ImgPanel'
  import VideoPanel from '../../components/VideoPanel'
  import MusicPanel from '../../components/MusicPanel'
  import TextPanel from '../../components/TextPanel'
  import AnimPanel from '../../components/AnimPanel'
  import OtherPanel from '../../components/OtherPanel'
  import appConst from '../../util/appConst'
  import VueDragResize from 'vue-drag-resize'

  import assist1 from '../../assets/img/assist/1.png'
  import assist2 from '../../assets/img/assist/2.png'
  import assist3 from '../../assets/img/assist/3.png'
  import assist4 from '../../assets/img/assist/4.png'
  import assist5 from '../../assets/img/assist/5.png'
  import assist6 from '../../assets/img/assist/6.png'

  import assist1s from '../../assets/img/assist-small/1.png'
  import assist2s from '../../assets/img/assist-small/2.png'
  import assist3s from '../../assets/img/assist-small/3.png'
  import assist4s from '../../assets/img/assist-small/4.png'
  import assist5s from '../../assets/img/assist-small/5.png'
  import assist6s from '../../assets/img/assist-small/6.png'
  import assist7s from '../../assets/img/assist-small/7.png'
  export default {
    data () {
      return {
        showTools: true,
        // pageMove: true,
        // pageScale: 1,
        itemId: null,
        panelState: 0,
        // canvasWidth: this.editorTheme.canvasWdth,
        // canvasHeight: this.editorTheme.canvasHeight,
        dialogSaveBeforeBack: false,
        panelTabState: 0,
        picBase64: '',
        http: appConst.BACKEND_DOMAIN,
        releaseUrl: '',
        showPreView: false,
        isLoadingPreview: false,
        leftHide: true,
        rightHide: false,
        assist: null,
        assist1: assist1s,
        assist2: assist2s,
        assist3: assist3s,
        assist4: assist4s,
        assist5: assist5s,
        assist6: assist6s,
        assist7: assist7s
      }
    },
    watch: {
      element () {
        let ele = this.$store.state.editor.editorElement
        let type = ele ? ele.type : 'null'
        this.panelTabState = 0
        // console.log(type)
        switch (type) {
          case 'text':
            this.panelState = 11
            break
          case 'icon':
          case 'pic':
            this.panelState = 12
            break
          case 'video':
            this.panelState = 12
            break
          case 'live':
            this.panelState = 12
            break
          case 'weather':
            this.panelState = 12
            break
          case 'doc':
            this.panelState = 12
            break
          case 'anim':
            this.panelState = 12
            break
          case 'other':
            if (ele.imgSrc === '1' || ele.imgSrc === 1) {
              this.panelState = 12
            }
            if (ele.imgSrc === '2' || ele.imgSrc === 2) {
              this.panelState = 11
            }
            break
          case 0:
            // this.rightHide = true
            this.panelState = 0
            break
          default:
            // this.rightHide = true
            this.panelState = -1
        }
      }
    },
    computed: {
      pageScale: {
        set (value) {
          this.$store.state.editor.pageScale = value
        },
        get () {
          return this.$store.state.editor.pageScale
        }
      },
      editorTheme () {
        return this.$store.state.editor.editorTheme
      },
      themeId () {
        return this.$store.state.editor.editorTheme.id
      },
      editorPage () {
        return this.$store.state.editor.editorPage
      },
      element () {
        let ele = this.$store.state.editor.editorElement
        return ele || {}
      }
    },
    methods: {
      updateAssist (type) {
        let elements = this.editorPage.elements
        let count = 0
        let i = 0
        switch (type) {
          case 1:
            this.assist = assist1
            for (i = 0; i < elements.length; i++) {
              let e = elements[i]
              if (e.type === 'pic' || e.type === 'video') {
                if (count === 0) {
                  e.top = 0
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth / 2
                  e.height = this.editorTheme.canvasHeight
                }
                if (count === 1) {
                  e.top = 0
                  e.left = this.editorTheme.canvasWidth / 2
                  e.width = this.editorTheme.canvasWidth / 2
                  e.height = this.editorTheme.canvasHeight
                }
                count++
                if (count === 2) {
                  break
                }
              }
            }
            break
          case 2:
            this.assist = assist2
            for (i = 0; i < elements.length; i++) {
              let e = elements[i]
              if (e.type === 'pic' || e.type === 'video') {
                if (count === 0) {
                  e.top = 0
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth
                  e.height = this.editorTheme.canvasHeight / 2
                }
                if (count === 1) {
                  e.top = this.editorTheme.canvasHeight / 2
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth
                  e.height = this.editorTheme.canvasHeight / 2
                }
                count++
                if (count === 2) {
                  break
                }
              }
            }
            break
          case 3:
            this.assist = assist3
            for (i = 0; i < elements.length; i++) {
              let e = elements[i]
              if (e.type === 'pic' || e.type === 'video') {
                if (count === 0) {
                  e.top = 0
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth / 3
                  e.height = this.editorTheme.canvasHeight
                }
                if (count === 1) {
                  e.top = 0
                  e.left = this.editorTheme.canvasWidth / 3
                  e.width = this.editorTheme.canvasWidth / 3
                  e.height = this.editorTheme.canvasHeight
                }
                if (count === 2) {
                  e.top = 0
                  e.left = this.editorTheme.canvasWidth * (2 / 3)
                  e.width = this.editorTheme.canvasWidth / 3
                  e.height = this.editorTheme.canvasHeight
                }
                count++
                if (count === 3) {
                  break
                }
              }
            }
            break
          case 4:
            this.assist = assist4
            for (i = 0; i < elements.length; i++) {
              let e = elements[i]
              if (e.type === 'pic' || e.type === 'video') {
                if (count === 0) {
                  e.top = 0
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth * (2 / 3)
                  e.height = this.editorTheme.canvasHeight / 2
                }
                if (count === 1) {
                  e.top = this.editorTheme.canvasHeight / 2
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth * (2 / 3)
                  e.height = this.editorTheme.canvasHeight / 2
                }
                if (count === 2) {
                  e.top = 0
                  e.left = this.editorTheme.canvasWidth * (2 / 3)
                  e.width = this.editorTheme.canvasWidth / 3
                  e.height = this.editorTheme.canvasHeight
                }
                count++
                if (count === 3) {
                  break
                }
              }
            }
            break
          case 5:
            this.assist = assist5
            for (i = 0; i < elements.length; i++) {
              let e = elements[i]
              if (e.type === 'pic' || e.type === 'video') {
                if (count === 0) {
                  e.top = 0
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth * (1 / 3)
                  e.height = this.editorTheme.canvasHeight
                }
                if (count === 1) {
                  e.top = 0
                  e.left = this.editorTheme.canvasWidth * (1 / 3)
                  e.width = this.editorTheme.canvasWidth * (2 / 3)
                  e.height = this.editorTheme.canvasHeight / 2
                }
                if (count === 2) {
                  e.top = this.editorTheme.canvasHeight / 2
                  e.left = this.editorTheme.canvasWidth * (1 / 3)
                  e.width = this.editorTheme.canvasWidth * (2 / 3)
                  e.height = this.editorTheme.canvasHeight / 2
                }
                count++
                if (count === 3) {
                  break
                }
              }
            }
            break
          case 6:
            this.assist = assist6
            for (i = 0; i < elements.length; i++) {
              let e = elements[i]
              if (e.type === 'pic' || e.type === 'video') {
                if (count === 0) {
                  e.top = 0
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth
                  e.height = this.editorTheme.canvasHeight / 3
                }
                if (count === 1) {
                  e.top = this.editorTheme.canvasHeight / 3
                  e.left = 0
                  e.width = this.editorTheme.canvasWidth
                  e.height = this.editorTheme.canvasHeight / 3
                }
                count++
                if (count === 2) {
                  break
                }
              }
            }
            break
          default:
            this.assist = ''
        }
      },
      checkFlash () {
        let flag = false
        let swf
        if (window.ActiveXObject) {
          try {
            swf = new window.ActiveXObject('ShockwaveFlash.ShockwaveFlash')
            if (swf) {
              flag = true
            }
          } catch (e) {
          }
        } else {
          try {
            swf = navigator.plugins['Shockwave Flash']
            if (swf) {
              flag = true
            }
          } catch (e) {
          }
        }
        return flag
      },
      clickOut () {
        this.$store.dispatch('setEditorElement', null)
        // this.panelState = -1
      },
      dialogSave () {
        return Promise.resolve().then(() => this.save()).then(() => this.$router.replace('themeList'))
      },
      getPicList () {
        // console.log('getPicList start')
        this.$store.dispatch('getPicListByThemeId', {
          cid: 2,
          type: 2,
          page: 1,
          limit: 20
        })
        // console.log('getPicList end')
      },
      getVideoList () {
        console.log('getVideoList start')
        this.$store.dispatch('getVideoListByThemeId', {
          cid: 1,
          type: 1,
          page: 1,
          limit: 5
        })
        console.log('getVideoList end')
      },
      getMusicList () {
        this.$store.dispatch('getMusicListByThemeId', {
          cid: 4,
          type: 4,
          page: 1,
          limit: 10
        })
      },
      getTextList () {
        this.$store.dispatch('getTextListByThemeId', {
          cid: 3,
          type: 3,
          page: 1,
          limit: 10
        })
      },
      getFlashList () {
        this.$store.dispatch('getAnimListByThemeId', {
          cid: 5,
          type: 5,
          page: 1,
          limit: 10
        })
      },
      addPicElement (ele) {
        // if (ele) {
        let obj = {}
        obj.type = 'pic'
        obj.top = 0
        obj.left = 0
        obj.width = ele.width
        obj.height = ele.height
        obj.imgSrc = ele.filePath
        obj.loop = ele.loop
        obj.mid = ele.id
        console.log('id', ele.id)
        this.$store.dispatch('addElement', obj)
        // } else {
        //   this.$store.dispatch('addElement', this.element)
        // }
        this.element.type = 'pic'
      },
      addVideoElement (ele) {
        let obj = {}
        obj.type = 'video'
        obj.top = 0
        obj.left = 0
        obj.width = 100
        obj.height = 50
        obj.videoSrc = ele.filePath
        obj.loop = ele.loop
        obj.mid = ele.id
        this.$store.dispatch('addElement', obj)
        this.element.type = 'video'
      },
      addDocElement (ele) {
        let obj = {}
        obj.type = 'doc'
        obj.top = 0
        obj.left = 0
        obj.width = 100
        obj.height = 50
        obj.videoSrc = ele.filePath
        obj.loop = ele.loop
        obj.mid = ele.id
        this.$store.dispatch('addElement', obj)
        this.element.type = 'doc'
      },
      addAnimElement (ele) {
        let obj = {}
        obj.type = 'anim'
        obj.top = 0
        obj.left = 0
        obj.width = 100
        obj.height = 50
        obj.videoSrc = ele.filePath
        obj.loop = ele.loop
        obj.mid = ele.id
        this.$store.dispatch('addElement', obj)
        this.element.type = 'anim'
      },
      addOtherElement (ele) {
        console.log(ele)
        let obj = {}
        obj.type = 'other'
        obj.top = 0
        obj.left = 0
        obj.width = 100
        obj.height = 50
        if (ele.type === 1) {
          obj.width = 250
          obj.height = 50
        }
        if (ele.type === 2) {
          obj.extend = 5
          obj.text = '滚动字幕'
        }
        obj.videoSrc = ele.html
        obj.imgSrc = ele.type
        obj.loop = ele.loop
        this.$store.dispatch('addElement', obj)
        this.element.type = 'other'
      },
      addBG (file) {
        this.$store.dispatch('addBGElement', {type: 'bg', imgSrc: file.filePath, mid: file.id})
      },
      cleanBG () {
        this.$store.dispatch('cleanBG')
      },
      addMusic (data) {
        this.editorPage.mid = data.id
        this.editorPage.music = data.filePath
        this.panelTabState = 0
      },
      cleanMusic () {
        this.editorPage.music = null
      },
      addLive () {
        this.rightHide = false
        this.$prompt('请输入直播地址', '添加直播', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          let obj = {}
          obj.type = 'live'
          obj.top = 0
          obj.left = 0
          obj.width = 200
          obj.height = 100
          obj.videoSrc = value
          this.$store.dispatch('addElement', obj)
          this.element.type = 'live'
        }).catch(() => {
        })
      },
      addWearher () {
        this.rightHide = false
        let obj = {}
        obj.type = 'weather'
        obj.top = 0
        obj.left = 0
        obj.width = 100
        obj.height = 50
        this.$store.dispatch('addElement', obj)
        this.element.type = 'weather'
      },
      cleanEle () {
        this.$store.dispatch('cleanEle', this.element)
      },
      addTextElement (type) {
        let param = {}
        param['type'] = 'text'
        param['text'] = '请输入文本'
        param['width'] = this.canvasWidth
        param['lineHeight'] = 1.5
        switch (type) {
          case 'plain':
            break
          case 'title':
            param['fontSize'] = 32
            param['fontWeight'] = 'bold'
            param['textAlign'] = 'center'
            break
          default:
        }
        this.$store.dispatch('addElement', param)
      },
      deploy () {
        this.isLoadingPreview = true
        this.$store.dispatch('saveTheme', tools.vue2json(this.$store.state.editor.editorTheme)).then(() => {
          setTimeout(() => {
            this.showPreView = true
            this.isLoadingPreview = false
          }, 1000)
        })
      },
      selectedElement (element) {
        this.$store.dispatch('setEditorElement', element)
      },
      deleteListener (event) {
        if (event.keyCode === 8 && event.target.nodeName !== 'INPUT' && event.target.nodeName !== 'TEXTAREA') {
          this.deleteElement()
        }
      },
      deleteElement () {
        this.$store.dispatch('deleteSelectedElement')
      },
      togglePanel (code) {
        this.rightHide = false
        this.panelState = code
      },
      view () {
        window.open('/#/view?type=theme&id=' + this.editorTheme.id)
      }
    },
    components: {
      Overview,
      Page,
      PicPicker,
      appConst,
      PreView,
      HeaderEdit,
      EditPanel,
      SvgPanel,
      ImgPanel,
      MusicPanel,
      VideoPanel,
      TextPanel,
      VueDragResize,
      AnimPanel,
      OtherPanel
    },
    mounted () {
      // this.assist = assist1
      this.$nextTick(() => {
        console.log(this.$refs.scr)
        this.$refs.scr.wrap.scrollTop = 940
        this.$refs.scr.wrap.scrollLeft = 980
      })
      this.itemId = this.$route.query.id
      let height = this.$route.query.height
      let width = this.$route.query.width
      let copy = this.$route.query.copy
      let type = this.$route.query.type
      let cid = this.$route.query.cid
      console.log('this.itemId', this.itemId)
      if (this.itemId) {
        this.$store.dispatch('getPageByThemeId', {id: this.itemId, copy: copy})
        // if (!this.pages) {
        //   this.$store.dispatch('addPage')
        // }
      } else {
        this.$store.dispatch('createTheme')
        this.$store.dispatch('addPage')
        this.$store.dispatch('cleanPicList')
        let self = this
        setTimeout(function () {
          if (height) {
            self.editorTheme.canvasWidth = width
            self.editorTheme.canvasHeight = height
          } else {
            self.editorTheme.canvasWidth = 1280
            self.editorTheme.canvasHeight = 720
          }
          self.editorTheme.type = type
          self.editorTheme.cid = cid
          console.log('cid', cid)
          if (type === 0) {
            self.editorTheme.title = '模版' + new Date().pattern('yyyyMMddHHmmss')
          } else {
            self.editorTheme.title = '模版' + new Date().pattern('yyyyMMddHHmmss')
          }
        }, 100)
      }
      if (!this.checkFlash()) {
        this.$alert('<p>你的flash已被禁用，这会影响到编辑功能正常使用。 <a href="http://www.adobe.com/go/getflashplayer" rel="nofollow" target="_blank" style="color: green" title="开启">立即启用</a></p>', '⚠️', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false
        })
      }
      this.getPicList()
      this.getVideoList()
      this.getMusicList()
      this.getTextList()
      this.getFlashList()
      document.addEventListener('keyup', this.deleteListener)
      window.onbeforeunload = () => false
    },
    destroyed () {
      document.removeEventListener('keyup', this.deleteListener)
      window.onbeforeunload = null
    }
  }
</script>
<style>
  .right-hide{
    transform:translateX(100%);
  }
  .hide{
    transform:translateX(-100%);
  }
  .tip_close{
    background-color: #e14f08 !important;
    width: 30px!important;
    right: -30px!important;
    height: 46px!important;
    font-size:16px!important;
    line-height: 23px!important;
    border-radius: 10%;
  }
  .tip_open {
    width: 15px;
    height: 30px;
    position: absolute;
    right: -15px;
    top: 3px;
    font-size: 12px;
    background-color: #8a979e;
    color: white;
    text-align: center;
  }
  .el-scrollbar__bar {
    z-index: 999 !important;
  }

  .ruler a {
    text-decoration: none;
  }

  .ruler ul {
    list-style: none;
    -webkit-padding-start: 0px;
    -webkit-margin-before: 0em;
  }

  .left ul>li {
    position: relative;
    width: 10px;
    height: 20px;
    border-top: 1px solid #060606;
    /* border-left: 1px solid gray; */
    border-right: 1px solid #060606;
    margin-left: 10px;
  }

  .left .p {
    width: 20px !important;
    border-top: 1px solid black;
    margin-left: 0px !important;
  }

  .left ul>li+li {
    border-left-color: #060606;
  }

  .left ul>li>a {
    font-size: 6px;
    color: white;
    display: block;
    position: absolute;
    height: 6px;
    line-height: 6px;
    margin-right: 5px;
    /* margin-top: 22px; */
  }

  .top ul>li {
    position: relative;
    width: 20px;
    height: 10px;
    border-bottom: 1px solid #060606;
    border-left: 1px solid #060606;
    /* border-right: 1px solid gray; */
    margin-top: 10px !important;
    float: left;
  }

  .top ul>li+li {
    /*border-left-color: #060606;*/
  }

  .top ul>li>a {
    font-size: 6px;
    color: white;
    display: block;
    position: absolute;
    height: 6px;
    line-height: 6px;
    /* margin-left: 5px; */
  }
  .top .p {
    position: relative;
    height: 20px !important;
    border-left: 1px solid black;
    margin-top: 0px !important;
    /* margin-bottom: 3px; */
  }
  .p a{
    font-size: 10px!important;
    color: #000 !important;
  }
  .top {
    position: absolute;
    left: 1020px;
    top: 1px;
    z-index: 1;
    width: 5000px;
  }
  .top ul{
  }
  .left{
    position: fixed;
    left: 1px;
    top: 20px;
  }

  .el-scrollbar__thumb {
    background-color: #00a0e9;
  }
</style>
<style lang="less" scoped>
  body {
    background-color: #3c3f41;
  }

  .editor {
    background-color: #eaedef;
    position: relative;
    height: 100%;
    overflow: hidden;
    user-select: none;
  }

  .section {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0;
    overflow: hidden;
  }

  .overview {
    position: absolute;
    left: 0;
    width: 160px;
    height: 100%;
    z-index: 10;
  }

  .canvas {
    position: absolute !important;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-75%, -50%);*/
    /*border: 2px solid #373f42;*/
    /*box-shadow: 0px 2px 30px 5px rgba(0, 0, 0, 0.2);*/
    box-sizing: content-box;
  }

  .control-panel {
    position: absolute;
    width: 300px;
    height: 80%;
    right: 0;
    top: 10%;
    border: 1px solid #d6d6d6;
    background-color: rgb(246, 246, 246);
    z-index: 10;
    /*border-radius: 10px;*/
    .funcs {
      position: absolute;
      left: -50px;
      top: 0;
      width: 50px;
      .func {
        color: #b2bcba;
        background: #fff;
        cursor: pointer;
        margin-top: 10px;
        display: block;
        width: 50px;
        height: 50px;
        border: 1px solid #d6d6d6;
        border-radius: 3px 0px 0px 3px;
        &:hover {
          .panel-button{
            color: #000;
          }
          color: #000;
        }
        &.active {
          .panel-button{
            color: #000;
          }
          border-right: 1px solid #ececec;
          background-color: #ececec;
          color: #000;
        }
      }
    }
    .panel-button{
      width: 1.2em;
      height: 1.2em;
      color: #afbdba;
    }
    .wrapper {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
    }
    .panel {
      position: absolute;
      left: 0;
      top: 0;
      min-height: 100%;
      width: 100%;
      padding: 10px;
      z-index: 2;
      background-color: #f9f9f9;
    }
    .panel-bg {
      .btn {
        float: left;
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        margin-top: 10px;
        margin-bottom: 20px;
      }
      .bgs {
        float: left;
        width: 80px;
        height: 80px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 5px 5px;
        &:hover {
          border: 2px solid #18ccc0;
          cursor: pointer;
        }
      }
    }
    .panel-text {
      .btn {
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 2px solid transparent;
        &:hover {
          cursor: pointer;
          border-color: #04b9c4;
        }
      }
    }
    .ele {
      float: left;
      width: 80px;
      height: 60px;
      background-color: #FFFFFF;
      /*background-repeat: no-repeat;*/
      /*background-position: center;*/
      background-size: 100% 100%;
      margin: 5px 5px;
      &:hover {
        border: 2px solid #18ccc0;
        cursor: pointer;
      }
      border: 1px solid #ffffff;
    }
    .ele1 {
      float: left;
      width: 60px;
      height: 80px;
      background-color: #FFFFFF;
      /*background-repeat: no-repeat;*/
      /*background-position: center;*/
      background-size: 100% 100%;
      margin: 5px 5px;
      &:hover {
        border: 2px solid #18ccc0;
        cursor: pointer;
      }
      border: 1px solid #ffffff;
    }

    /*box-shadow: 2px 2px 2px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;*/
  }
</style>
